<template>
  <div>
    <div class="box-padding-16">
      <div class="box-padding-16-flex" style="margin-bottom: 16px">
        <div class="box-padding-16-flex-left">
          <div class="line"></div>
          <div class="box-title">数据总览</div>
        </div>

        <div class="times">
          <el-button type="primary" size="mini" @click="handleAdd" style="margin-right: 20px">新增</el-button>
          <el-date-picker v-model="paramsQuery.recordTime" type="year" placeholder="选择日期" format="yyyy"
            @change="selectTimes" value-format="yyyy"></el-date-picker>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <!-- <el-table-column prop="recordTime" label="时间" align="center" /> -->

        <el-table-column prop="name" label="产品名称" align="center" />
        <el-table-column prop="planAmount" label="计划完成量/万吨" align="center" />
        <el-table-column prop="jan" label="1月" align="center" />
        <el-table-column prop="feb" label="2月" align="center" />
        <el-table-column prop="mar" label="3月" align="center" />
        <el-table-column prop="apr" label="4月" align="center" />
        <el-table-column prop="may" label="5月" align="center" />
        <el-table-column prop="jun" label="6月" align="center" />
        <el-table-column prop="jul" label="7月" align="center" />
        <el-table-column prop="aug" label="8月" align="center" />
        <el-table-column prop="sep" label="9月" align="center" />
        <el-table-column prop="oct" label="10月" align="center" />
        <el-table-column prop="nov" label="11月" align="center" />
        <el-table-column prop="dec" label="12月" align="center" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="paramsQuery.pageNum" :limit.sync="paramsQuery.pageSize"
        @pagination="getPlan" />
    </div>

    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="年份" prop="year">
          <el-date-picker v-model="form.year" type="year" value-format="yyyy" format="yyyy" style="width: 240px;"
            placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="一月" prop="jan">
          <el-input v-model="form.jan" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="二月" prop="feb">
          <el-input v-model="form.feb" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="三月" prop="mar">
          <el-input v-model="form.mar" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="四月" prop="apr">
          <el-input v-model="form.apr" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="五月" prop="may">
          <el-input v-model="form.may" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="六月" prop="jun">
          <el-input v-model="form.jun" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="七月" prop="jul">
          <el-input v-model="form.jul" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="八月" prop="aug">
          <el-input v-model="form.aug" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="九月" prop="sep">
          <el-input v-model="form.sep" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="十月" prop="oct">
          <el-input v-model="form.oct" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="十一月" prop="nov">
          <el-input v-model="form.nov" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="十二月" prop="dec">
          <el-input v-model="form.dec" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="计划完成量" prop="planAmount">
          <el-input v-model="form.planAmount" placeholder="请输入计划完成量" />
        </el-form-item>
        <!-- <el-form-item label="时间" prop="recordTime">
          <el-input v-model="form.recordTime" placeholder="请输入时间" />
        </el-form-item>
        <el-form-item label="生产量" prop="amountProducitonPlan">
          <el-input-number  style="width: 240px;" :controls="false"   v-model="form.amountProducitonPlan" :precision="2" :step="0.1" :max="1000000000000000"></el-input-number>
        </el-form-item>
        <el-form-item label="销售量" prop="amountSalePlan">
           <el-input-number  style="width: 240px;" :controls="false" v-model="form.amountSalePlan" :precision="2" :step="0.1" :max="1000000000000000"></el-input-number>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addproductionPlan,
  updateproductionPlan,
  exportproductionPlanInfo,
  productionPlanList,
  deleteproductionPlan,
  getproductionPlan,


  addProductionMonthPlan,
  updateProductionMonthPlan,
  productionMonthPlanList,
  delproductionPlan,
  getproductionPlans
} from "@/api/home.js";
export default {
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "产品名称不能为空", trigger: "blur" }
        ],
        recordTime: [
          { required: true, message: "时间不能为空", trigger: "blur" }
        ],
        amountProducitonPlan: [
          { required: true, message: "生产量不能为空", trigger: "blur" }
        ],
        amountSalePlan: [
          { required: true, message: "销售量不能为空", trigger: "blur" }
        ]
      },
      form: {},
      open: false,
      title: "",
      total: 0,
      paramsQuery: {
        pageNum: 1,
        pageSize: 10,

        recordTime: new Date().getFullYear().toString(), // '2025'
      },
      tableData: [],
    };
  },
  created() {
    this.getPlan();
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加参数";
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            updateProductionMonthPlan(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getPlan();
            });
          } else {
            addProductionMonthPlan(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getPlan();
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        recordTime: undefined,
        name: undefined,
        amountSalePlan: undefined,
        amountProducitonPlan: undefined,
      };
      this.resetForm("form");
    },
    handleUpdate(row) {
      this.reset();
      getproductionPlans(row.id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改计划数据";
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(function () {
          return delproductionPlan(row.id);
        })
        .then(() => {
          this.getPlan();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    getPlan() {
      productionMonthPlanList(this.paramsQuery).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    selectTimes() {
      this.getPlan();
    },
  },
};
</script>

<style scoped>
.times {
  width: 200px;
  height: 24px;
  display: flex;
  align-items: center;
}

.times ::v-deep .el-input__inner {
  width: 120px !important;
  height: 24px !important;
  line-height: 24px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 30px;
  background: rgba(243, 247, 251, 1);
}

/* 3. 图标垂直居中 */
.times ::v-deep .el-input__icon {
  line-height: 24px;
}
</style>